<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>SAP - Sistema de Acompanhamento de Processos</title>

        <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>

        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/black-tie/skin.css" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/syntaxhighlighter/styles/syntaxhighlighter.css" />
        <style type="text/css">
            * { margin: 0; padding: 0; z-index: 1; }

            #limites { position: absolute; top: 50%; left: 50%; width: 680px; height: auto; margin: -200px 0 0 -340px; background-color: #eee; }

            #conteudo { padding: 20px; }

            .new {
                background: url(../images/new-ico.gif) no-repeat 1%;
            }

            .ui-widget {
                font-size: 98% !important;
            }

            .ui-menu .ui-menu-item .ui-menu-item-label {
                padding: .2em 1.7em;
            }

            .ui-growl {
                top:115px;
            }

            .themeMenu {
                overflow: auto;
                height:auto;
                width:200px;
            }
        </style>

        <script type="text/javascript" src="#{request.contextPath}/js/padrao.js"></script>

        <script type="text/javascript">
            function handleLoginRequest(xhr, status, args) {
                if (args.validationFailed || !args.loggedIn) {
                    jQuery('#dialog').effect("shake", {times: 5}, 100);
                } else {
                    PF('dlg').hide();
                    jQuery('#loginLink').fadeOut();
                }
            }
        </script>

        <ui:insert name="head"></ui:insert>
    </h:head>
    <h:body>
        <h:form id="frmLogin">
            <div id="limites">
                <div id="conteudo">
                    <p:growl id="messages" showDetail="true" showSummary="true" life="5000" />

                    <p:focus for="username" />
                    <p:panel header="Digite suas Credenciais" style="text-align: center">
                        <div align="center">
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <h:panelGrid columns="2" cellpadding="5" style="text-align: center">
                                <h:outputLabel for="username" value="Username: *" />
                                <p:inputText id="username" value="#{loginBean.username}" required="true" label="username"  onfocus="javascript:AbreJanela(false);" />

                                <h:outputLabel for="password" value="Password: * " />
                                <p:password id="password" value="#{loginBean.password}"  feedback="Teste de FeedBack" 
                                            promptLabel="Digite sua Senha" weakLabel="Senha Fraca"  
                                            goodLabel="Senha Excelente" strongLabel="Senha THE BEST" onfocus="javascript:AbreJanela(false);" /> 
                                <f:facet name="footer" id="footer">
                                    <p:commandButton value="Login" update="frmLogin messages"
                                                     actionListener="#{loginBean.login}" onclick="javascript:AbreJanela(true);" />
                                </f:facet>
                            </h:panelGrid>
                            <div id="conexao" name="conexao" style="visibility:hidden" align="center">
                                <p:fieldset legend="Aguarde ...">
                                    <img src="images/comunicacao.gif" width="200" height="100" alt="comunicacao"/>
                                </p:fieldset>
                            </div>
                        </div>
                    </p:panel>
                </div>
            </div>
        </h:form>
    </h:body>
</html>